<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 未登录的时候，显示登录链接 -->
    <a href="./login.html" id="login">登录</a>
    <!-- 已登录后，显示欢迎用户的信息 -->
    <span id="welcome" style="display: none;">欢迎xxx</span>

    <script>
        ajax({
            url: '/getInfo',
            method: 'get',
            data: null,
            success: function (data) {
                if (data) {
                    //将用户名展示出来
                    document.getElementById('login').style.display = "none";
                    let text = document.getElementById('welcome');
                    text.innerHTML = '欢迎,' + data.username;
                    text.style.display = "block";
                } else { 
                    //不做处理
                }
            },
            error: function (res) {
                //不展示任何错误信息
            }
        })

        function ajax({ url, method, data, success, error }) {
            const xhr = new XMLHttpRequest();

            // 事件监听
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        // 我们需要对不同的业务逻辑返回状态做处理
                        let res = JSON.parse(xhr.responseText); // {code: '200', msg: '', data: undefined}
                        if (res.code === '200') {
                            success(res.data);
                        } else {
                            error(res);
                        }
                    } else {
                        // 展示错误信息
                        console.log(xhr.statusText);
                        alert(xhr.statusText);
                    }
                }
            };

            xhr.open(method, url);

            // 设置请求头的信息，必须放在open方法调用后
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.send(data || null);
        }

    </script>
</body>

</html>